<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="购物车" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="content">
            <van-empty v-if="store.cartList.length == 0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="购物车空空如也" />
            <van-swipe-cell v-else v-for="item in store.cartList" :key="item.id">
                <van-card :num="item.count" :price="item.price" :title="item.title" class="goods-card">
                    <template #thumb>
                        <van-image lazy-load :src="item.image" />
                    </template>
                    <template #tag>
                        <van-checkbox v-model="item.checked"></van-checkbox>
                    </template>
                    <template #footer>
                        <div @click.stop class="stepper">
                            <!-- <van-stepper v-model="item.count" @change="onChange(item.id, $event)" /> -->
                            <button @click="item.count--" :disabled="item.count == 1">-</button>
                            {{ item.count }}
                            <button @click="onAdd(item.id, item.count)">+</button>
                        </div>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="onDelete(item.id)" />
                </template>
            </van-swipe-cell>
        </main>
    </div>
    <footer class="footer">
        <van-submit-bar :price="store.totalPrice" button-text="提交订单" @submit="$router.push('/order')">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
        </van-submit-bar>
    </footer>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue'
import throttle from '@/utils/throttle'
const store = useCounterStore()
const allChecked = computed({
    get() {
        if (store.cartList.length == 0) {
            return false
        } else {
            return store.cartList.every(item => item.checked)

        }
    },
    set(newval) {
        store.cartList.forEach(item => item.checked = newval)
    }
})
const onDelete = (id) => {
    store.deleteItem(id)
}
// const onChange = throttle((id, count) => {
//     console.log(id, count)
//     store.updateCount(id, count)
// }, 1000)
const onAdd = throttle((id, count) => {
    console.log(id, count)
    store.updateCount(id, count + 1)
}, 1000)
</script>
<style>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.stepper {
    button {
        width: 14px;
        height: 16px;
    }
}
</style>